<% if user_signed_in? %>
  <%= javascript_pack_tag 'Chat', defer: true %>
<% end %>
<% title "DEV Live 📡👩‍💻👨‍💻👩‍💻👨‍💻" %>
<link rel="canonical" href="https://dev.to/live"/>
<meta name="description" content="DEV LIVE">
<meta name="keywords" content="software development,engineering,rails,javascript,ruby">

<meta property="og:type" content="article" />
<meta property="og:url" content="https://dev.to/live" />
<meta property="og:title" content="DEV LIVE" />
<meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/bqzj1pwho9e0jicqo44s.png" />
<meta property="og:description" content="DEV Live Events" />
<meta property="og:site_name" content="The Practical Dev" />

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ThePracticalDev">
<meta name="twitter:title" content="DEV LIVE">
<meta property="og:description" content="DEV Live Events" />
<meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/bqzj1pwho9e0jicqo44s.png">

<style>
<% cache "live-page-css-#{ApplicationConfig["DEPLOYMENT_SIGNATURE"].to_s}", expires_in: 1.hour do %>
  <%= Rails.application.assets['live.css'].to_s.html_safe %>
<% end %>
</style>

<% if (user_signed_in? && Flipflop.live_is_live?) || current_user&.has_role?(:super_admin) %>
  <div class="live-container">
    <div class="live-component">
      <div>
        <!--<script src="//player.dacast.com/js/player.js" width="1920" height="1080" id="<%= ENV["DACAST_STREAM_CODE"]%>" player="jw7" jwurl="juQPHW/th8VUHaO/2KkeVlAdGN9ksJZog2z6SH+TyMU=" class="dacast-video"></script>-->
        <iframe class="live-video" src="//iframe.dacast.com/b/105417/c/465464" width="1920" height="1080" frameborder="0" scrolling="no" allow="autoplay" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
      </div>
      <div class="live-chat-wrapper">
        <div id="chat" class="live-chat" data-pusher-key="<%= ENV["PUSHER_KEY"] %>" data-chat-channels="<%= @chat_channels %>" data-chat-options="<%= {showChannelsList:false, showTimestamp: false, activeChannelId: @active_channel.id}.to_json %>">
      </div>
    </div>
  </div>
  <div class="live-under-message">DEV Live is in beta and currently does not support Safari. We recommend Chrome or Firefox for optimal viewing experience. If you are having issues, contact <a href="mailto:members@dev.to">members@dev.to</a> for support. ❤️</div>
<% elsif Flipflop.live_starting_soon? %>
  <div class="live-upcoming-info">
    <h1 style="text-align: center"><span style="display: inline-block">DEV LIVE <%= image_tag "emoji/emoji-one-television.png", style: "width: 55px; height: 50px; vertical-align: text-top;" %></span></h1>
    <h4 style="text-align: center">
      <i>Our event is starting soon! Check back very shortly.
    </h4>
  </div>
  <script>
    setTimeout(function(){
      window.location.reload(1);
    }, 2500);
  </script>
<% elsif Flipflop.live_is_live? %>
  <div class="live-upcoming-info">
    <h1 style="text-align: center;font-size:3.5em;margin:-100px auto">DEV IS <span style="display: inline-block">LIVE <%= image_tag "emoji/emoji-one-television.png", style: "width: 60px;" %></span></h1>
    <%= render "devise/registrations/registration_form" %>

  </div>
<% else %>
  <div class="live-upcoming-info">
    <h1>Nothing is live right now. Check out the <a href="/events">Events Page</a> for a full schedule.</h1>
  </div>
<% end %>
